<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=1024">
<title>CDCCAM | Gallery</title>
<link rel="shortcut icon" href="img/icon.png" type="image/x-icon">
<link href="css/font-awesome.css" rel="StyleSheet" type="text/css"/>
<link href="css/style.css" rel="StyleSheet" type="text/css"/>
<link href="css/745.css" rel="StyleSheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jqueryui.js" ></script>
<script type="text/javascript" >
	$(document).ready(function(){
		function Slide(images){
			var img_label = ["name1","name2","name3","name4","name5","name6","name7","name8"];
			//$(".dcr-sld-namesp").append(name);
			var _slide = document.createElement("div");
			var _slide_pre = document.createElement("div");
			var _slide_thumbs = document.createElement("div");
			var _names = new Array();
			var _images = new Array();
			var _current_slide= 0 ;
			var _interval = null;
			
			_slide.addImage=function(image){_images.push(image);};
			
			$(_slide).attr("class","dcr-sld-h");
			$(_slide_pre).attr("class","dcr-sld-pre");
			$(_slide_thumbs).attr("class","dcr-sld-thumbs");
			
			$(_slide).append( _slide_pre ).append( _slide_thumbs );
			
			for(var i=0;i<images.length;i++){
				var thumb = document.createElement("div");
				var img = document.createElement("img");
				var names = document.createElement("div");
				$(names).attr("class","dcr-sld-namesp").text(img_label[i]);
				$(thumb).attr("class","dcr-sld-thumb").attr("sid",i).append(names).append(img).click(function(){
					_current_slide=parseInt($(this).attr("sid"));
					$(_slide_pre).find("img").toggle("slide",function(){
						$(this).attr("src",images[_current_slide]).toggle("slide")
					});
					clearInterval(_interval);
					_interval=setInterval(function(){animateSlide();},5000);
				});
				$(img).attr("src",images[i]);
				$(_slide_thumbs).append(thumb);
				if(i==0){
					var pre_i = document.createElement("div");
					var img = document.createElement("img");
					$(img).attr("src",images[i]).attr("class","img");
					$(pre_i).attr("class","dct-sld-i").append(img);
					$(_slide_pre).append(pre_i);
				}
			}
			
			function animateSlide(){
				_current_slide=_current_slide>=(images.length-1)?0:(_current_slide+1);
				$(_slide_pre).find("img").toggle("fadeout",function(){
					$(this).attr("src",images[_current_slide]).toggle("fadein")
				});
			}
			
			_slide.animate=function(){
				//_interval=setInterval(animateSlide(),1000);
				_interval=setInterval(function(){animateSlide();},5000);
			};
			_slide.stop=function(){clearInterval(_interval);};
			return _slide;
		}
		
		var images = ["img/sldn1.png","img/sldn2.png","img/sldn3.png","img/sldn4.png","img/sld5.jpg","img/sld6.jpg","img/sld7.jpg","img/sld8.jpg"];
		var slide = new Slide(images);
		$(".m-slide").append(slide);
		slide.animate();
		
		$(".cd-gallery-i").click(function(){
			var span = document.createElement("span");
			var img = document.createElement("img");
			$("#msg-h").css("position","fixed");
			$(span).attr("style","display: inline-block; height: 90%; padding: 5px; border-radius: 5px; background: rgba(250,250,250,0.7); ").append(img);
			$(img).attr("src",$(this).find("img").attr("href"));
			$(".cntn-overlay").show();
			$(".msg-h").html(span).slideDown().focus();
		});
		
		$(".cntn-overlay").click(function(){
			$(".msg-h").hide();
			$(this).hide();
		});
		
		$(".msg-h").click(function(){
			$(this).hide();
			$(".cntn-overlay").hide();
		});
	});
</script>
</head>
<body>
	<div class="dcr-lyr" >
		<!--<div class="lyr-fixed dcr-top" >
			<div class="dcr-phone" ><div class="fa fa-phone" style="padding: 0px 5px 0px 0px; font-size: 14px;"  ></div>855(0)12 97 8800488</div>
			<div class="dcr-email" ><div class="fa fa-envelope"  style="padding: 0px 5px 0px 0px;  font-size: 14px;" ></div>info@cdccam.com</div>
		</div>-->
        <div class="header">
		<div class="lyr-fixed dcr-lg-mnu" >
			<div class="dcr-logo" ><img src="img/logo.png" height="100%" style="display: inline-block;" /></div>
			<div class="dcr-mnu-src" >
				<div class="dcr-mnu" >
                    <div class="sc-fb fa fa-facebook-square" ></div>
                    <div class="sc-skp fa fa-skype" ></div>
                    <!--<div class="sc-yt fa fa-youtube-square" ></div>
                    <div class="sc-tw fa fa-twitter-square" ></div>
                    <div class="sc-gp fa fa-google-plus-square" ></div>-->
				</div>
				<div class="dcr-src" >
					<input type="text" name="txtsearch" id="txtsearch" class="txtsearch" placeholder="Search ... " value="" />
					<span class="search-icon fa fa-search" ></span>
				</div>
			</div>
		</div>
        </div>
        
    <div class="menus">
        <div class="dcr-mnus" >
                    <div class="dcr-mnu-i" ><a href="index.html" >HOME</a></div>
                    <div class="dcr-mnu-i" ><a href="about.html" >ABOUT US</a></div>
                    <div class="dcr-mnu-i dcr-sub-mnu" >
                        <a href="service.html" >SERVICE</a>
                        <ul>
                            <li><a href="builtout.html#build-out" >BUILD-OUT</a></li>
                            <li><a href="mfc.html#multi-family" >Multi-Family Construction</a></li>
                            <li><a href="flats.html#flates" >Flats</a></li>
                            <li><a href="townhouse.html#town-house" >Townhouses</a></li>
                            <li><a href="duplex.html#duplex" >Duplex</a></li>   
                        </ul>
                    </div>
                    <div class="dcr-mnu-i" ><a href="restoration.html" >RESTORATION SERVICE</a></div>
                    <div class="dcr-mnu-i" ><a href="designanddecor.html" >DESIGN & DECOR SERVICE</a></div>
                    <div class="dcr-mnu-i dcr-sub-mnu" >
						<a href="gallery.html"> GALLERY </a>
						<ul>
							<li><a href="gallery.html">Our Latest Project</a></li>
							<li><a href="gallery.html">Sample Design</a></li>
						</ul>
					</div>
                    <div class="dcr-mnu-i" ><a href="contact.html" >CONTACT</a></div>
        
        
		</div>
        
    </div>
    
	<div class="dcr-lyr" style="background: #000; " >
		<div class="lyr-fixed m-slide" ></div>
	</div>
	<div class="dcr-lyr" >
		<div class="lyr-fixed dcr-mn-cntn" >
			<div class="dcr-ls" >
				<div class="blk-info" style="width: 99%; padding: 0px 0.5%; " >
					<h3 style="font-family: 'SWISSB'; font-size: 18px; color: #CF4E9D; " >Gallery</h3>
					<div class="cd-gallery" >
						<div class="cd-gallery-i" >
							<img src="img/sld1.jpg" width="100%" href="img/sld1.jpg" />
						</div>
						<div class="cd-gallery-i" >
							<img src="img/sld2.jpg" width="100%" href="img/sld2.jpg" />
						</div>
						<div class="cd-gallery-i" >
							<img src="img/sld3.jpg" width="100%" href="img/sld3.jpg"  />
						</div>
						<div class="cd-gallery-i" >
							<img src="img/sld4.jpg" width="100%" href="img/sld4.jpg" />
						</div>
						<div class="cd-gallery-i" >
							<img src="img/sld5.jpg" width="100%" href="img/sld5.jpg" />
						</div>
						<div class="cd-gallery-i" >
							<img src="img/sld6.jpg" width="100%" href="img/sld6.jpg" />
						</div>
						<div class="cd-gallery-i" >
							<img src="img/sld7.jpg" width="100%" href="img/sld7.jpg" />
						</div>
						<div class="cd-gallery-i" >
							<img src="img/sld8.jpg" width="100%" href="img/sld8.jpg" />
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-1.jpg" width="100%" href="img/gallery-1.jpg" />
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-2.jpg" width="100%"  href="img/gallery-2.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-3.jpg" width="100%" href="img/gallery-3.jpg" />
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-4.jpg" width="100%"  href="img/gallery-4.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-5.jpg" width="100%"  href="img/gallery-5.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-6.jpg" width="100%"  href="img/gallery-6.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-7.jpg" width="100%"  href="img/gallery-7.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-8.jpg" width="100%"  href="img/gallery-8.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-9.jpg" width="100%"  href="img/gallery-9.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-10.jpg" width="100%"  href="img/gallery-10.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-11.jpg" width="100%"  href="img/gallery-11.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-12.jpg" width="100%"  href="img/gallery-12.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-13.jpg" width="100%"  href="img/gallery-13.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-14.jpg" width="100%"  href="img/gallery-14.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-15.jpg" width="100%"  href="img/gallery-15.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-16.jpg" width="100%"  href="img/gallery-16.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-17.jpg" width="100%"  href="img/gallery-17.jpg"/>
						</div>
						<div class="cd-gallery-i" >
							<img src="img/small-gallery-18.jpg" width="100%"  href="img/gallery-18.jpg"/>
						</div>
					</div>
				</div>
			</div>
			<div class="dcr-rs" style="border-left: 1px dashed #CCC; " >
				<h2 style="font-family: 'SWISSB'; font-size: 22px; margin: 2px 0px;" >Our products</h3>
				<ul>
					<li><a href="wwd.html#service">What we do</a></li>
					<li><a href="builtout.html#build-out">BUILD-OUT</a></li>
					<li><a href="restoration.html#restoration">Restoration</a></li>
					<li><a href="mfc.html#multi-family">Multi-Family Construction</a></li>
					<li><a href="flats.html#flates">Flats</a></li>
					<li><a href="townhouse.html#town-house">Townhouses</a></li>
					<li><a href="duplex.html#duplex">Duplex</a></li>
				</ul>
			</div>
		</div>
		<div class="lyr-fixed dcr-footer" >
			<div class="drc-addr-term" >
				<div class="dcr-address" >
				Chaktumok D&eacute;cor &amp; Construction (Cambodia) Limited<br/>
				<span style="color: #999; font-size: 12px; " >
				Building #5C, St. 284 corner St. 163, Olympic,Chomkamorn, Phnom Penh, Cambodia.<br/> 
                Tel:  855(0)71 7644448 | 855(0)12 97 8800488 |  855(0)92 294800&nbsb;Email: info@cdccam.com
				</span>
				</div>
				<div class="dcr-term" ><a >Term of service</a> | <a >Privacy policy</a></div>
			</div>
			<div class="dcr-alr-mnu" >
				<div class="alr-dsn" >2014 All Rights researved. Designed By: ASDICT</div>
				<div class="alr-mnu" >
					<div class="alr-mnu-i" ><a href="contact.html" >Contact</a></div>
					<div class="alr-mnu-i" ><a href="gallery.html" class="active" >Gallery</a></div>
					<div class="alr-mnu-i" ><a href="service.html" >Service</a></div>
					<div class="alr-mnu-i" ><a href="about.html" >About</a></div>
					<div class="alr-mnu-i" ><a href="index.html" >Home</a></div>
				</div>
			</div>
		</div>
	</div>
	<div class="cntn-overlay" ></div>
			<div class="msg-h" id="msg-h"></div>
</body>
</html>